<template>
	<view ref="waterfallItem" class="waterfall-item" :style="{width: waterfall.realColumnWidth + 'px', left: left + 'px', top: top + 'px'}">
		<slot ></slot>
	</view>
</template>

<script>
	export default {
		name: 'XgWaterfallItem',
		inject: ['waterfall'],
		data() {
			return {
				top: 0,
				left: 0,
				heightList:[]
				
			}
		},
		provide() {
			return {
				waterfallItem: this,
			};
		},
		watch:{
			'waterfall.heightList.length':{
				handler(newValue) {
				    if (newValue==this.waterfall.length) {
						if(!this.waterfall.lengthFull){
							this.waterfall.columnsHeight=[0,0]
						}
						this.waterfall.lengthFull=true
				        for(let a=0;a<this.waterfall.heightList.length;a++){
							if(this._uid==this.waterfall.heightList[a]._uid){
								let waterfallItemHeight = this.waterfall.heightList[a].height
								let minColumnHeight = Math.min(...this.waterfall.columnsHeight);
								let minColumnIndex = this.waterfall.columnsHeight.indexOf(minColumnHeight);
								this.top = minColumnHeight;
								this.waterfall.columnsHeight[minColumnIndex] += waterfallItemHeight;
								this.left = this.waterfall.columnsLeft[minColumnIndex];
								if(a==this.waterfall.heightList.length-1){
									this.$nextTick(()=>{
										this.waterfall.loading()
										this.waterfall.lengthFull=false
										this.waterfall.hList=[]
									})
								}
							}
						}
				    }
				}		
			},
			'waterfall.list.length':{
				handler(newValue, oldValue) {
					const selector = uni.createSelectorQuery().in(this);
					selector.select('.waterfall-item').fields({size: true});
					selector.exec(data => {
						const waterfallItemHeight = data[0].height;
						this.waterfall.length=this.waterfall.$refs.waterfall.$children.length
						this.waterfall.hList.push({height:waterfallItemHeight,_uid:this._uid})
						if(this.waterfall.hList.length==this.waterfall.length){
							let list=JSON.stringify(this.waterfall.hList)
							this.waterfall.heightList=JSON.parse(list)
						}
					})
				}
			}
		},
		// mounted() {
		// 	if(!this.waterfall.lengthFull){
		// 		this.$nextTick(async function () {
		// 			const selector = uni.createSelectorQuery().in(this);
		// 			selector.select('.waterfall-item').fields({size: true});
		// 			selector.exec(data => {
		// 				const waterfallItemHeight = data[0].height;
		// 				const minColumnHeight = Math.min(...this.waterfall.columnsHeight);	
		// 				const minColumnIndex = this.waterfall.columnsHeight.indexOf(minColumnHeight);	
		// 				this.top = minColumnHeight;
		// 				this.waterfall.columnsHeight[minColumnIndex] += waterfallItemHeight;
		// 				this.left = this.waterfall.columnsLeft[minColumnIndex];
		// 				this.waterfall.loading()
		// 			})
		// 		})
		// 	}
		// },
		methods: {
			onloading(){
				const selector = uni.createSelectorQuery().in(this);
				selector.select('.waterfall-item').fields({size: true});
				selector.exec(data => {
					const waterfallItemHeight = data[0].height;
					this.waterfall.heightList.push({height:waterfallItemHeight,_uid:this._uid})
				})
			},
		},
	}
</script>

<style scoped>
	.waterfall-item {
		position: absolute;
	}
</style>